<html>

<head>
    <!-- 导入样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
    <!-- 导入 Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <!-- 导入组件库 -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.js"></script>
</head>

<style>
    .invalid {
        background-color: #ccc !important;
    }
</style>

<body>
<div id="app">
    <el-space direction="vertical" alignment="left">
        <el-space>
            <div>参照：</div>
            <el-select v-model="select.type" placeholder="请选择彩票类型">
                <el-option v-for="item in types" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="select.year" clearable placeholder="请选择年份">
                <el-option v-for="item in years" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="select.qs" clearable placeholder="请选择期数">
                <el-option v-for="item in qss" :label="item" :value="item"></el-option>
            </el-select>
        </el-space>

        <div>
            <div>
                <el-space>
                    <el-button type="primary" @click="autogen">机器选择</el-button>
                    <el-input type="number" v-model="select.minScore" placeholder="请输入最小得分"></el-input>
                </el-space>
            </div>
            <el-space direction="vertical">
                <div v-for="(item,index) in autogenList">第{{index+1}}组 {{item}}</div>
            </el-space>
        </div>
        <!--        <div>-->
        <!--            <div>手动选择</div>-->
        <!--            <el-space>-->
        <!--                <el-input type="number" v-for="idx in 7" v-model="nums[idx-1]" @focus="inputFocus(idx)"-->
        <!--                          :placeholder="placeholder(idx)"></el-input>-->
        <!--                <el-button type="primary" @click="checkNums">检查</el-button>-->
        <!--            </el-space>-->
        <!--            <el-table :data="details" v-if="currentIdx > 0" :row-class-name="rowClassName">-->
        <!--                <el-table-column :label="'第' + currentIdx + '位号码出现概率'">-->
        <!--                    <el-table-column prop="num" label="号码"></el-table-column>-->
        <!--                    <el-table-column prop="count" label="出现次数"></el-table-column>-->
        <!--                    <el-table-column prop="total" label="总期数"></el-table-column>-->
        <!--                    <el-table-column prop="rate" label="次数占比"></el-table-column>-->
        <!--                </el-table-column>-->
        <!--            </el-table>-->
        <!--        </div>-->
        <div>
            <div>手动选择</div>
            <el-space>
                <el-select type="number" v-for="(node, idx) in selectNums" v-model="node.nums"
                           @focus="inputFocus(idx)"
                           clearable multiple multiple-limit="5"
                           :placeholder="placeholder(idx)">
                    <el-option v-for="item in node.options" :value="item.num">
                        <span style="float: left">{{ item.num }}</span>
                        <span style=" float: right;  font-size: 13px; "
                              :style="node.max === item.rate ? 'color: red': 'var(--el-text-color-secondary)'">{{
                            new Number(item.rate).toFixed(2) }}%</span>
                    </el-option>
                </el-select>
                <el-button type="primary" @click="manualGenNums">生成号码</el-button>
            </el-space>
            <el-space direction="vertical">
                <div v-for="(item,index) in manualGenList">第{{index+1}}组 {{item}}</div>
            </el-space>
        </div>
    </el-space>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                years: [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
                qss: [],
                types: [{value: 'DLT', label: '大乐透'}, {value: 'SSQ', label: '双色球'}],

                select: {
                    year: null,
                    qs: null,
                    type: 'DLT',
                    minScore: 60
                },
                currentIdx: 0,
                autogenList: [],
                nums: [],
                details: [],
                selectNums: [{nums: [], options: [], max: 0}],// 选择的号码{nums:[],options:[{"num":1,"count":0,"total":1845,"rate":0}]}
                manualGenList: [],// 手动生成的列表
            }
        },
        mounted() {
            let currentYear = (Number)(new Date().getFullYear());
            this.years = [];
            this.qss = [];
            for (var i = 2010; i <= currentYear; i++) {
                this.years.unshift(i);
            }
            for (var i = 1; i <= 160; i++) {
                this.qss.push(i);
            }
            this.selectNums = [];
            for (let i = 0; i < 7; i++) {
                this.selectNums.push({nums: [], options: [], max: 0});// {"num": 1, "count": 0, "total": 1845, "rate": 0}
            }
            console.log(this.selectNums)
        },
        methods: {
            autogen() {
                if (!this.select.minScore) {
                    this.$message.error("请输入最小得分");
                    return false;
                }
                axios.get('/api/autogen', {params: {...this.select}}).then(res => {
                    this.autogenList = res.data || [];
                    // console.log(this.autogenList);
                })
            },
            placeholder(idx) {
                return "请输入第" + (idx + 1) + "位号码";
            },
            rowClassName({row, rowIndex}) {
                let num = 0;
                if (this.currentIdx > 1) {
                    num = this.nums[this.currentIdx - 2] || 0;
                }
                if ('DLT' === this.select.type && this.currentIdx === 6) {
                    num = 0;
                }
                if ('SSQ' === this.select.type && this.currentIdx === 7) {
                    num = 0;
                }
                if (row.rate <= 0 || row.num <= num) {
                    return "invalid";
                }
            },
            inputFocus(idx) {
                this.currentIdx = idx;
                axios.get('/api/detail', {params: {...this.select, index: idx + 1}}).then(res => {
                    // this.details = res.data || [];
                    this.selectNums[idx].options = res.data || [];
                    this.selectNums[idx].max = Math.max(...res.data.map(x => x.rate));
                    // console.log(this.details);
                })
            },
            checkNums() {
                axios.get('/api/check', {params: {...this.select, nums: this.nums.toString()}}).then(res => {
                    if (res.status === 200) {
                        this.$message.success(res.data);
                    }
                })
            },
            manualGenNums() {
                let nums = this.selectNums.map(x => x.nums);
                if (!nums.every(x => x.length)) {
                    this.$message.error('请选择完整号码');
                    return false;
                }
                axios.post('/api/manual-gen-nums', {
                    ...this.select,
                    nums: nums
                }).then(res => {
                    if (res.status === 200) {
                        this.manualGenList = res.data || [];
                        this.$message.success('操作成功');
                    }
                }).catch(err => {
                    console.error(err);
                })
            }
        }
    }).use(ElementPlus).mount('#app');
</script>

</body>

</html>